<form action="" class="form-horizontal" role="form">
  <div class="form-group">
		<label class="col-sm-2 control-label">证书图片</label>
		<div class="col-sm-5">
	      <input type="text" class="form-control margin-bottom" name="img" id="img" placeholder="请上传图标" value="{$agent.certificate_img}"> 
	      <div>
	      	<span class="btn btn-primary" id="upload-image">上传图片</span>
	      </div>
	      <div class="img-place" style="<empty name='agent.certificate_img'>display:none;</empty>">
	      	<img id="img-source" src="{$agent.certificate_img}" />
	      </div>
		</div>
  </div>
  
  <div id="settings" class="form-group" style="<empty name='agent.certificate_img'>display:none;</empty>">
		<label class="col-sm-2 control-label"></label>
		<div class="col-sm-5">
			<div class="col-sm-9"><label class="control-label">标签名称</label><input id="set-label" class="form-control" value="" /></div>
			<div class="col-sm-9"><label class="control-label">显示文本</label><input id="set-text" class="form-control" value="" /></div>
			<div class="col-sm-9"><label class="control-label">字体颜色<span id="set-color-preview" class="color-preview" style="width: 11px;height: 11px;float: right;margin-top: 5px;margin-left: 5px;"></span></label><input id="set-color" class="form-control" value="" /></div>
		</div>
  </div>
  
  <div id="div-preview" class="form-group" style="<empty name='agent.certificate_img'>display:none;</empty>">
		<label class="col-sm-2 control-label">预览区</label>
		<div class="col-sm-5">
			<img id="img-preview" src="{$agent.certificateImg}" />
			<input id="certificateImg" name="certificateImg" type="hidden" value="{$agent.certificateImg}" />
		</div>
  </div>
  
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-8">
    	<a class="btn btn-default" onclick="javascript:history.go(-1)">返回上页</a>
		<a class="btn btn-default" onclick="self.location=document.referrer">返回上页并刷新</a>
      <input type="hidden" name="id" value="{$agent.id}"/>
      <button id="btnPreview" type="button" class="btn btn-info">预览</button>
      <button type="submit" class="btn btn-primary submit" data-loading-txt="提交中，请稍后……" data-ajax-url="__CONTROLLER__/agentIndexPost">保存更改</button>
    </div>
  </div>
</form>

<style type="text/css">
.img-place {
	height: 26em;
	border: 1px solid;
	overflow: scroll;
	position: relative;
}
.dragable-block {
	display: block;
	width: 100px;
	height: 30px;
	position: absolute;
	background: #DD4D00;
	opacity: 0.8;
}
</style>

<link rel="stylesheet" type="text/css" href="__PUBLIC__/Style/Common/bigcolorpicker/jquery.bigcolorpicker.css">
<script type="text/javascript" src="__PUBLIC__/Style/Common/bigcolorpicker/jquery.bigcolorpicker.min.js"></script>
<!-- uploadify -->
<link rel="stylesheet" href="__PUBLIC__/Style/Common/uploadify/uploadify.css">
<script type="text/javascript" src="__PUBLIC__/Style/Common/uploadify/jquery.uploadify.min.js?{:rand(0,9999)}"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">

  $("#upload-image").uploadify({
    'multi'            :  true,
    'buttonClass'      :  'margin-bottom',
    'fileSizeLimit'    :   '200kb',
    'buttonText'       :  '上传图片',
    'fileTypeDesc'     :   'Image Files',
    'fileTypeExts'     :   '*.jpg; *.png',
    'swf'              :   '__PUBLIC__/Style/Common/uploadify/uploadify.swf',
    'uploader'         :   '__MODULE__/Upload/uploadOne',
    'onUploadStart'    :  function(){},
    'onUploadSuccess'  : function( data, res ) {
      var url = eval("(" + res + ")").extra.url;
      if ( data.error != 0) {
    	  $("#img").val( url );  
    	  $("#img-source").attr("src", url);
    	  $(".img-place").show();
      }
    }
  });
  
  var config = {$agent.jsonConfig};
  
  $(function() {
	  var i = 0;
	  
	  function init() {
		  for( var o in config ) {
			  addBlock( config[o] );
		  }
	  }
	  
	  function addBlock( param ) {
		  var dragBlock = $("<a class=\"dragable-block\" href=\"javascript:void(0);\">"+
	  				"<input id=\"pos-x\" type=\"hidden\" name=\"config["+i+"][pos][0]\">"+
	  				"<input id=\"pos-y\" type=\"hidden\" name=\"config["+i+"][pos][1]\">"+
	  				"<input id=\"label\" type=\"hidden\" name=\"config["+i+"][label]\">"+
	  				"<input id=\"value\" type=\"hidden\" name=\"config["+i+"][value]\">"+
	  				"<input id=\"color\" type=\"hidden\" name=\"config["+i+"][color]\">"+
	  			"</a>").appendTo(".img-place");
		  if ( param ) {
			  if ( param['pos'] ) {
				  dragBlock.find("#pos-x").val(param['pos'][0]*1);
				  dragBlock.find("#pos-y").val(param['pos'][1]*1);
			  }
			  if ( param['label'] ) {
				  dragBlock.find("#label").val(param['label']);
			  }
			  if ( param['value'] ) {
				  dragBlock.find("#value").val(param['value']);
			  }
			  if ( param['color'] ) {
				  dragBlock.find("#color").val(param['color']);
			  }
		  }
		  dragBlock.css({'left':param['pos'][0]*1, 'top':param['pos'][1]*1});
		  dragBlock.draggable({ scroll:false });
		  dragBlock.mousemove(function ( e ) {
              var X = $(this).get(0).offsetLeft;
			  var Y = $(this).get(0).offsetTop;
			  $(this).find("#pos-x").val( X );
			  $(this).find("#pos-y").val( Y );
          });
		  dragBlock.click(function() {
			  $(this).parent().find(".dragable-block").css({'background': '#DD4D00'});
			  $(this).css({'background': '#FF0000'});
			  $(this).focus();
			  $('#settings').show();
			  setLabel($(this).find("#label"));
			  setText($(this).find("#value"));
			  setColor($(this).find("#color"));
		  }).keyup(function( e ) {
			  if ( e.which == 46 ) {
				  $(this).remove();
			  }
		  });
		  i++;
	  }
	  
	  function setLabel( label ) {
		  $('#set-label').val( label.val() );
		  $('#set-label').unbind('change');
		  $('#set-label').bind('change', function() {
			  label.val($(this).val());
		  });
	  }
	  
	  function setColor( color ) {
		  $('#set-color-preview').css("backgroundColor", color.val());
		  $('#set-color').val( color.val() );
	      $("#set-color").bigColorpicker(function(el, colorNow) {
		      color.val(colorNow);
		      $(el).val(colorNow);
		      $('#set-color-preview').css("backgroundColor", colorNow);
		  });
	  }
	  
	  function setText( text ) {
		  $('#set-text').val( text.val() );
		  $('#set-text').unbind('change');
		  $('#set-text').bind('change', function() {
			  text.val($(this).val());
		  });
	  }
	  
	  $("#img-source").click(function( e ) {
			addBlock({ 'pos' : [e.offsetX, e.offsetY] });
	  });
	  
	  init();
  });
  
  $(function() { 
	  $("#btnPreview").click(function() {
		  var data = $("form[role='form']").serialize();
		  $.post('__CONTROLLER__/previewCertificate', data, function( res ) {
			  $("#div-preview").show();
			  $("#img-preview").attr("src", res.extra.img);
			  $("#certificateImg").val( res.extra.img );
		  });
	  });
  });
</script>